<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <shopee-tabs value="tab1">
        <shopee-tab-pane label="未处理" name="tab1">
          <shopee-table class=dataTable stripe :data="toDoTableData">
            <shopee-table-column prop="updatetime" label="更新时间" :width="150">
            </shopee-table-column>

            <shopee-table-column  label="待办项" :width="500">
              <template slot-scope="props">
                <el-link @click="goToInstance(props.row.step_id)" type="primary">
                  {{ props.row.title }}
                </el-link>
              </template>
            </shopee-table-column>




            <shopee-table-column label="状态" :width="100">
              <template slot-scope="props">
                <div v-if="props.row.status === 0" class="status unread">
                  <shopee-tag status="fail">未读</shopee-tag>
                </div>
                <div v-if="props.row.status === 1">
                  <shopee-tag status="warn">已读</shopee-tag>
                </div>
                <div v-if="props.row.status === 2">
                  <shopee-tag status="success">已完成</shopee-tag>
                </div>
                <div v-if="props.row.status === 3">
                  <shopee-tag status="error">跳过</shopee-tag>
                </div>
              </template>
            </shopee-table-column>

             <shopee-table-column  label="待办信息" :width="300">
              <template slot-scope="props">
                  {{ props.row.content }}
              </template>
            </shopee-table-column>

            <shopee-table-column label="操作" fixed="right" :width="500">
              <template slot-scope="props">
                <el-button size="small" @click="skip(props.row.id)" type="info" outline>跳过</el-button>
                <el-button size="small" @click="finish(props.row.id)" type="success" outline>完成</el-button>
                <el-button size="small" @click="forwarddialogVisible = true;form.id=props.row.id" type="primary"
                           outline>转发
                </el-button>

                 <el-button size="small" @click="viewMyTask(props.row.step_id)" type="primary"
                           plain>我的关联任务
                </el-button>

              </template>
            </shopee-table-column>
          </shopee-table>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5,10, 15, 20, 25]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalRow">
          </el-pagination>

        </shopee-tab-pane>

        <shopee-tab-pane label="已处理" name="tab2">
          <shopee-table class=dataTable stripe :data="toDoTableData2">
            <shopee-table-column prop="updatetime" label="更新时间" :width="150">
            </shopee-table-column>

            <shopee-table-column  label="待办项" :width="500">
               <template slot-scope="props">
                <el-link @click="goToInstance(props.row.step_id)" type="primary">
                  {{ props.row.title }}
                </el-link>
              </template>
            </shopee-table-column>


            <shopee-table-column label="状态" :width="100">
              <template slot-scope="props">
                <div v-if="props.row.status === 0" class="status unread">
                  <shopee-tag status="fail">未读</shopee-tag>
                </div>
                <div v-if="props.row.status === 1">
                  <shopee-tag status="warn">已读</shopee-tag>
                </div>
                <div v-if="props.row.status === 2">
                  <shopee-tag status="success">已完成</shopee-tag>
                </div>
                <div v-if="props.row.status === 3">
                  <shopee-tag status="error">跳过</shopee-tag>
                </div>
              </template>
            </shopee-table-column>

            <shopee-table-column  label="待办信息" :width="300">
              <template slot-scope="props">
                  {{ props.row.content }}
              </template>
            </shopee-table-column>

            <shopee-table-column label="操作" fixed="right" :width="500">
              <template slot-scope="props">
                 <el-button size="small" @click="viewMyTask(props.row.step_id)" type="primary"
                           plain>我的关联任务
                </el-button>
              </template>
            </shopee-table-column>

          </shopee-table>
           <el-pagination
            background
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :page-sizes="[5,10, 15, 20, 25]"
            :page-size="pageSize2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalRow2">
          </el-pagination>


        </shopee-tab-pane>
      </shopee-tabs>


      <el-dialog title="转发" :visible.sync="forwarddialogVisible" width="40%">
        <shopee-input v-model="form.asssignee" placeholder="输入转发对象的邮箱"></shopee-input>
        <br>
        <el-button size="small" @click="forward" type="primary">确认</el-button>
      </el-dialog>


      <el-dialog title="我的关联任务" :visible.sync="myTaskDialogVisible" width="80%">
           <shopee-table class=dataTable stripe :data="myTaskTableData">
               <shopee-table-column label="需求" :width="400">
                  <template slot-scope="props">
                    <el-link :href="'https://jira.shopee.io/browse/'+props.row.parent_key" target="_blank" type="primary">
                      [{{ props.row.parent_key  }}]{{props.row.parent_name}}
                     </el-link>
                  </template>
              </shopee-table-column>
               <shopee-table-column  label="任务" >
                  <template slot-scope="props">
                    <el-link :href="'https://jira.shopee.io/browse/'+props.row.key" target="_blank" type="primary">
                       [{{ props.row.key  }}]{{props.row.name}}
                     </el-link>
                  </template>
              </shopee-table-column>
               <shopee-table-column prop="status" label="状态" :width="100">
            </shopee-table-column>
             <shopee-table-column prop="assignee" label="指派人":width="250" >
            </shopee-table-column>
           </shopee-table>

      </el-dialog>


    </div>
  </el-card>
</template>

<script>
  import {api, getRequest, postRequest} from "@/api/commit";

  export default {
    name: "TodoTable",
    data() {
      return {
        toDoTableData: [],
        currentPage: 1,
        totalRow: 0,
        pageSize: 10 ,
        toDoTableData2: [],
        currentPage2: 1,
        totalRow2: 0,
        pageSize2: 10 ,
        forwarddialogVisible: false,
        myTaskDialogVisible:false,
        myTaskTableData:[],
        form: {
          asssignee: '',
          id: ''
        }
      }
    },
    methods: {
      goToInstance(step_id){
        // 获取 instancei_id , 跳转get_
        getRequest(api['task_instance_get_by_step_id'], {step_id:step_id}).then((res) => {
          res = res.resultReturn
          let task_instance_id=res.data
          window.open("/#/TaskInstanceDetailsView?tab=2&id="+task_instance_id, '_blank');
        }, (error) => {
          console.info(error)
        })

      },
      viewMyTask(id){
        getRequest(api['todo_view_my_task'],{"id":id}).then((res) => {
          res = res.resultReturn
          this.myTaskTableData = res.data
          this.myTaskDialogVisible=true
        }, (error) => {
          console.info(error)
        })
      },
      skip(id) {
        let params = {
          "id": id
        }
        postRequest(api['todo_skip'], params).then((res) => {
          res = res.resultReturn
          this.init_data()
        }, (error) => {
          console.info(error)
        })
      },
      finish(id) {
        let params = {
          "id": id
        }
        postRequest(api['todo_done'], params).then((res) => {
          res = res.resultReturn
          // this.tasklistData= res.data
          // 刷新
          this.init_data()
        }, (error) => {
          console.info(error)
        })

      },
      forward() {
        let params = {
          "asssignee": this.form.asssignee,
          "id": this.form.id
        }
        postRequest(api['todo_forward'], params).then((res) => {
          res = res.resultReturn
          this.forwarddialogVisible = false;
        }, (error) => {
          console.info(error)
        })
        // 刷新
        this.init_data()
      },
      handleSizeChange(val) {
             this.pageSize = val;
             this.init_data1();
      },
      //当前页变换
      handleCurrentChange(val) {
             this.currentPage = val;
             this.init_data1();
      },
      handleSizeChange2(val) {
             this.pageSize2 = val;
             this.init_data2();
      },
      //当前页变换
      handleCurrentChange2(val) {
             this.currentPage2 = val;
             this.init_data2();
      },
      init_data() {
        this.init_data1()
        this.init_data2()
      },
      init_data1() {
        var pageSize = this.pageSize;
        var currentPage = this.currentPage;
        getRequest(api['todo_list'],{"is_done":0,"page_size":pageSize,"page":currentPage}).then((res) => {
          res = res.resultReturn
          this.toDoTableData = res.data
          this.totalRow=res.total
        }, (error) => {
          console.info(error)
        })
      },
      init_data2() {
        var pageSize = this.pageSize2;
        var currentPage = this.currentPage2;
        getRequest(api['todo_list'],{"is_done":1,"page_size":pageSize,"page":currentPage}).then((res) => {
          res = res.resultReturn
          this.toDoTableData2 = res.data
          this.totalRow2=res.total
        }, (error) => {
          console.info(error)
        })
      }
    },
    mounted() {
      this.init_data()
    }
  }
</script>
